<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div v-if="permissionStrValue.indexOf('permissionList:upload') !== -1">
            <el-upload
                class="upload-demo"
                accept=".xls, .xlsx"
                action="http://121.199.58.229:8180/user/permission/upload-permission"
                multiple
                :limit="1"
                :on-success="handleSuccess"
                :file-list="fileList">
                <el-button size="small" type="success" >点击上传</el-button>
                <div slot="tip" class="el-upload__tip" style="color: red">请按照权限模板上传</div>
            </el-upload>
            </div>
             <div style="margin: 20px 20px">
                <el-tree
                    :data="data"
                    show-checkbox
                    default-expand-all
                    node-key="id"
                    ref="tree"
                    highlight-current
                    :props="defaultProps"
                    @check="getChildrenKeys()">
                    <span class="custom-tree-node" slot-scope="{ node }">
                    <span class="categoryName">{{ node.label }}</span>
                       <i class="el-icon-delete" @click="remove"></i>
                    </span>
                </el-tree>
                <br>
            </div>

        </el-card>

    </div>
</template>

<script>
export default {
    name: 'PermissionList',
    data() {
        return{
            data: [],
            permissionStrValue: '',
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            /* 获取选中节点的id */
            ids: [],
            fileList: []

        }
    },
    created() {
        this.list()
        //获取权限值
       this.permissionStrValue = JSON.parse(window.sessionStorage.getItem('permissionList')).toString();

    },
    methods: {
        save() {

        },

        async list() {
            const{data : res} = await this.$http.get('/user/permission/get-permission-tree')
            console.log(res.data.list)
            this.data = res.data.list
        },
        // getCheckedNodes() {
        //     console.log(this.$refs.tree.getCheckedNodes());
        // },
        getChildrenKeys() {
            this.ids = [];
            var arr = this.$refs.tree.getCheckedNodes();
            console.log(arr)
            var permissionIds = [];
            arr.forEach((value) => {
                permissionIds.push(value.id);
            });
            const set = new Set(permissionIds);
            permissionIds = [...set];
            this.ids = permissionIds;
            console.log(JSON.parse(JSON.stringify(this.ids)));
        },

        setCheckedKeys(list) {
            this.$refs.tree.setCheckedKeys(list);
        },
        async remove() {
            if(this.ids.length == 0) {
                return this.$message.error("请在要删除的权限打上勾！");
            }
            const confirmResult = await this.$confirm('是否删除该权限?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => {
                return err;
            });
             //当用户确认时，则返回值为字符串：confirm
            //取消时，返回字符串cancel
            if (confirmResult !== 'confirm'){
                return this.$message.info("已取消删除")
            }
            let id = this.ids[0];
            const{data : res} = await this.$http.delete('/user/permission/delete-by-id/' + id);
            if(res.success) {
                this.list();
                return this.$message.success("删除成功");
            } else {
                 return this.$message.error(res.message);
            }
           

        },
        handlePreview() {

        },
        handleRemove() {

        },
        beforeRemove() {

        },
        handleSuccess(res) {
            if(res.success) {
                this.$message.success("批量导入成功");
                this.fileList = [];
                this.list();
                
            } else {
                return this.$message.error("批量导入失败");
            }
            
         
        }


    },
}
</script>

<style scoped>
.categoryName,
.el-icon-delete {
  font-size: 16px;
}
.el-icon-delete {
  margin-left: 10px;
  color: #409eff;
}

.importDialog-content {
  float: right;
  font-size: 20px;
  text-align: center;
}
.el-upload {
  color: orange;
}
.importDialog-content h3 {
  margin-top: 200px;
  padding: 0 0 10px 220px;
  color: black;
}
.card {
  margin-left: 250px;
  width: 500px;
  padding: 100px 0;
}
    
</style>